<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="/css/mui.min.css">
		<link rel="stylesheet" href="/css/style.css">
	</head>
	<body>
		<header id="header" class="mui-bar mui-bar-nav">
			<button id="headerBacker" class="mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left">
				<span class="mui-icon mui-icon-left-nav"></span>
			</button>
			<h1 class="mui-title">我的订单</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded">
				<div id="segmentedControl" class="mui-segmented-control">
					<a class="mui-control-item mui-active" href="#item1">未完成订单</a>
					<a class="mui-control-item" href="#item2">已完成订单</a>
					<a class="mui-control-item" href="#item3">全部订单</a>
				</div>
				<ul id="item1" class="mui-control-content mui-table-view mui-table-view-striped mui-table-view-condensed mui-active">
					@if (isset($orders[1]) && count($orders[1]) > 0)
						@foreach($orders[1] as $order)
							<li class="mui-table-view-cell mui-media" v-for="item in items">
							<a href="javascript:showOrderPopover('{{$order['id']}}')">
									<img class="mui-media-object mui-pull-left" src="{{$order['cover']}}">
									<div class="mui-media-body">
										<div class="mui-ellipsis-2">{{$order['name']}}</div>
									</div>
									<div class="meta-info">
										<div class="author">
											<span class="price-first">¥ {{$order['current_price']}}</span> / <span class="price-two">¥ {{$order['original_price']}}</span></div>
										<div class="time">&nbsp;</div>
										<h5>预约服务时间：{{$order['date'].' '.$order['time']}}</h5>
									</div>
								</a>
							</li>
						@endforeach
					@else
						<p class="title" style="text-align: center;color: #ccc; margin: 40px;">没有数据</p>
					@endif
				</ul>
				<ul id="item2" class="mui-control-content mui-table-view mui-table-view-striped mui-table-view-condensed">
					@if (isset($orders[6]) && count($orders[6]) > 0)
						@foreach($orders[6] as $order)
							<li class="mui-table-view-cell mui-media" v-for="item in items">
								<a href="javascript:showOrderPopover('{{$order['id']}}')">
									<img class="mui-media-object mui-pull-left" src="{{$order['cover']}}">
									<div class="mui-media-body">
										<div class="mui-ellipsis-2">{{$order['name']}}</div>
									</div>
									<div class="meta-info">
										<div class="author">
											<span class="price-first">¥ {{$order['current_price']}}</span> / <span class="price-two">¥ {{$order['original_price']}}</span></div>
										<div class="time">&nbsp;</div>
										<h5>预约服务时间：{{$order['date'].' '.$order['time']}}</h5>
									</div>
								</a>
							</li>
						@endforeach
					@else
						<p class="title" style="text-align: center;color: #ccc; margin: 40px;">没有数据</p>
					@endif
				</ul>
				<ul id="item3" class="mui-control-content mui-table-view mui-table-view-striped mui-table-view-condensed">

					@if (isset($orders[9]) && count($orders[9]) > 0)
						@foreach($orders[9] as $order)
							<li class="mui-table-view-cell mui-media" v-for="item in items">
								<a href="javascript:showOrderPopover('{{$order['id']}}')">
									<img class="mui-media-object mui-pull-left" src="{{$order['cover']}}">
									<div class="mui-media-body">
										<div class="mui-ellipsis-2">{{$order['name']}}</div>
									</div>
									<div class="meta-info">
										<div class="author">
											<span class="price-first">¥ {{$order['current_price']}}</span> / <span class="price-two">¥ {{$order['original_price']}}</span></div>
										<div class="time">&nbsp;</div>
										<h5>预约服务时间：{{$order['date'].' '.$order['time']}}</h5>
									</div>
								</a>
							</li>
						@endforeach
					@else
						<p class="title" style="text-align: center;color: #ccc; margin: 40px;">没有数据</p>
					@endif

					{{--<li class="mui-table-view-cell">--}}
						{{--<div class="mui-table">--}}
							{{--<div class="mui-table-cell mui-col-xs-12">--}}
								{{--<a href="#delete">--}}
									{{--<h5 class="mui-ellipsis">家庭深度保洁（101-120）平米 4小时</h5>--}}
									{{--<h5>预约服务时间：2020年12月10日下午</h5>--}}
									{{--<p class="mui-h6 mui-ellipsis">劲松三区12号楼一单元1202</p>--}}
								{{--</a>--}}
							{{--</div>--}}
						{{--</div>--}}
					{{--</li>--}}
					{{--<li class="mui-table-view-cell">--}}
						{{--<div class="mui-table">--}}
							{{--<div class="mui-table-cell mui-col-xs-12">--}}
								{{--<a href="#delete">--}}
									{{--<h5 class="mui-ellipsis">家庭深度保洁（101-120）平米 4小时</h5>--}}
									{{--<h5>预约服务时间：2020年12月10日下午</h5>--}}
									{{--<p class="mui-h6 mui-ellipsis">劲松三区12号楼一单元1202</p>--}}
								{{--</a>--}}
							{{--</div>--}}
						{{--</div>--}}
					{{--</li>--}}
					{{--<li class="mui-table-view-cell">--}}
						{{--<div class="mui-table">--}}
							{{--<div class="mui-table-cell mui-col-xs-12">--}}
								{{--<a href="#delete">--}}
									{{--<h5 class="mui-ellipsis">家庭深度保洁（101-120）平米 4小时</h5>--}}
									{{--<h5>预约服务时间：2020年12月10日下午</h5>--}}
									{{--<p class="mui-h6 mui-ellipsis">劲松三区12号楼一单元1202</p>--}}
								{{--</a>--}}
							{{--</div>--}}
						{{--</div>--}}
					{{--</li>--}}
					{{--<li class="mui-table-view-cell">--}}
						{{--<div class="mui-table">--}}
							{{--<div class="mui-table-cell mui-col-xs-12">--}}
								{{--<a href="#delete">--}}
									{{--<h5 class="mui-ellipsis">家庭深度保洁（101-120）平米 4小时</h5>--}}
									{{--<h5>预约服务时间：2020年12月10日下午</h5>--}}
									{{--<p class="mui-h6 mui-ellipsis">劲松三区12号楼一单元1202</p>--}}
								{{--</a>--}}
							{{--</div>--}}
						{{--</div>--}}
					{{--</li>--}}
				</ul>
				<div class="mui-content-padded footer">
					<p>
						--- 已经到底喽 ---
					</p>
				</div>
			</div>
		</div>
		<div id="orderPopover" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#" id="orderPopoverInfo">查看订单</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#" id="orderPopoverCancel" style="color: #FF3B30;">取消订单</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#orderPopover"><b>取消</b></a>
				</li>
			</ul>
		</div>
		<script src="/js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init({
				swipeBack: true
			});

			function showOrderPopover(order_id) {
				// mui.alert("/my/order_info?id=" + order_id);
				document.getElementById('orderPopoverInfo').href = "/my/order_info?order_id=" + order_id
				document.getElementById('orderPopoverCancel').href = "/my/order_cancel?order_id=" + order_id
				mui('#orderPopover').popover('toggle');	
			}
		</script>
	</body>
</html>
